<!--
 卡券组件
 Created by xunyin
 CopyRight 讯音云商（厦门）科技有限公司  www.tonetn.com
-->
<template>
	<view class="couponBox">
		<view class="selectSiteBox" @click="show = true">
			<text>{{shopDefault.storeName ? shopDefault.storeName : '点击选择店铺'}}</text>
			<image src="../../static/icon/rightTwo.png" mode=""></image>
		</view>
		<view class="couponList" v-if="couponList.length>0">
			<view class="couponLi" v-for="item in couponList" :key="item.id">
				<view class="left">
					<view class="cou-money">
            <view class="cou-icon">¥</view>
            <view class="cou-number">{{ item.amount }}</view>
          </view>
          <view class="cou-sub-title" v-if="item.type ==='H' || item.type ==='N'">抵时：{{item.everyUseableHourCount}}小时</view>
          <view class="cou-sub-title" v-if="item.type ==='C'">满¥{{ item.outRule }}元可用</view>
				</view>
				<view class="center">
          <view class="cou-name">{{ item.name }}</view>
          <view class="cou-expiration-date" v-if="item.type === 'H' || item.type === 'N'">有效期：{{item.limitDay}}天</view>
          <view class="cou-expiration-date" v-if="item.type === 'C'">有效期：{{$u.timeFormat(item.endTime, 'yyyy年mm月dd日')}}</view>
          <view class="time-period">{{item.availWeekdaysText+item.availTimescaleText}}可用</view>
				</view>
				<view class="right" @click="confirmUserBuyConpon(item.id,item.type)">
          <view class="cou-button" v-if="item.type ==='H' || item.type ==='N'">购买</view>
          <view class="cou-button" v-if="item.type ==='C'">领取</view>
        </view>
			</view>
		</view>
		<view class="hideTextBox">
			没有更多了哟~
		</view>
		<u-picker :show="show" :columns="columns" keyName="storeName" @confirm="confirm" @cancel="cancel"></u-picker>
	</view>
</template>

<script>
	import { storeNameList } from "@/api/mtstore";
	import { getCouponList,userBuyConpon } from "@/api/coupon";
  import { mapGetters } from "vuex";
	import {weappPay } from "@/libs/wechat";
	export default {
    data() {
      return {
        show: false, // 店铺选择列表的显示状态
        columns: [
          []
        ], // 店铺列表
        storeId: 0,
        shopDefault: {}, // 默认选择的店铺
        couponList: [], // 卡券列表
      }
    },
    computed: mapGetters(["userInfo"]),
    methods: {
      init(storeId) { // 内容初始化
        //把字符storeId转int
        this.storeId = parseInt(storeId);
        this.getShopList();   // 获取店铺列表
        //this.getCouponList(); // 卡券列表
      },
      getShopList() { // 获取店铺列表
        storeNameList({isAddPlatFlag: 0}).then(res => {
          let defalutShop = res.data[0];
          let isHasDefault = false;
          this.columns = [res.data];
          res.data.forEach((item) => {
            if (item.storeId === this.storeId) {
              this.shopDefault = item;
              isHasDefault = true;
            }
          });
          if (!isHasDefault) {
            this.shopDefault = defalutShop;
          }
          this.storeId = this.shopDefault.storeId;
          this.getCouponList();
        })
      },
      getCouponList() { // 卡券列表
        let that = this
        getCouponList({storeId: this.storeId, changeType: 1}).then(res => {
          that.couponList = res.data.couponList.content
        })
      },
      confirm(e) { // 确认
        this.shopDefault = e.value[0]
        this.storeId = this.shopDefault.storeId;
        this.getCouponList(); // 获取卡券列表
        this.cancel()
      },
      confirmUserBuyConpon(couponId, couponType) {
        let param = {
          storeId: this.storeId,
          userId: this.userInfo.uid,
          couponId: couponId,
          couponType: couponType
        }
        userBuyConpon(param).then(res => {
          if (couponType === "C" && res.status === 200) {
            uni.showToast({
              title: "领取成功",
              icon: "none",
              duration: 3000
            });
          } else if(couponType === "C"){
            uni.showToast({
              title: "领取失败",
              icon: "none",
              duration: 3000
            });
          } else {
            const payment = res.data.payment;
            weappPay(payment)
                .then(() => {
                  this.$yrouter.back();
                })
          }
        }).catch(err => {
          uni.showToast({
            title: couponType === "C" ? "优惠券" + err.msg : "购买卡券，失败原因：" + err.msg,
            icon: "none",
            duration: 3000,
          });
        })
      },
      cancel() { // 取消
        this.show = false
      }
    }
  }
</script>

<style scoped lang="scss">
	.couponBox {
		width: 100%;
		height: auto;

		.selectSiteBox {
			width: calc(90% - 40rpx);
			height: auto;
			padding: 20rpx;
			background: #f7f7f7;
			border-radius: 10rpx;
			box-shadow: 4rpx 6rpx 4rpx #f1f1f1;
			margin: 15rpx auto 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			image{
				width: 60rpx;
				height: 60rpx;
			}
			text {
				font-size: 30rpx;
				color: #333;
			}
		}

		.couponList {
			width: 100%;
			height: auto;
      background-color: #f7f7f7;
      padding: 15rpx 0;
      margin-top: 30rpx;
			.couponLi {
				width: 96%;
				height: auto;
				margin: 15rpx auto;
				display: flex;
        background-color: #ffffff;
				box-shadow: 4rpx 6rpx 4rpx #f1f1f1;
				border-radius: 10rpx;
				overflow: hidden;
        //增加伪元素
        &:before{
          content: "";
          display: block;
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          background-color: #f7f7f7;
          margin-top: auto;
          margin-bottom: auto;
          margin-left: -25rpx;
        }
				.left {
					min-width: 170rpx;
					display: flex;
					flex-direction: column;
					text-align: center;
          .cou-money{
            display: flex;
            justify-content: center;
            align-items: flex-end;
            height: 98rpx;
            padding-bottom: 10rpx;
            .cou-icon{
              font-size: 30rpx;
              color: #ff7814;
              padding: 0 10rpx 10rpx 0;
            }
            .cou-number{
              font-size: 70rpx;
              color: #ff7814;
              font-weight: bold;
            }
          }
          .cou-sub-title{
            font-size: 20rpx;
            color: #ff9800;
            background-color: #ffeedd;
            height: 28rpx;
            border-radius: 13rpx;
            padding: 3rpx 6rpx;
          }
				}
				.center {
					background: #fff;
					flex: 1;
					padding: 20rpx 30rpx 20rpx 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.cou-name {
            font-size: 34rpx;
            color: #333;
            font-weight: bold;
          }
          .cou-expiration-date{
            font-size: 20rpx;
            color: #999;
            margin-top: 10rpx;
          }
          .time-period{
            font-size: 20rpx;
            color: #999;
            margin-top: 10rpx;
          }
				}
				.right {
					padding: 0 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
          .cou-button {
            width: 120rpx;
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            color: #ff7814;
            border-radius: 30rpx;
            border: 1px solid #ff7814;
          }
				}
			}
		}

		.hideTextBox{
			margin: 40rpx auto 30rpx;
			text-align: center;
		}
	}
</style>
